<template>
	<view class="box">
		<view class="type">
			<text :class="currentindex==index? 'typed active' : 'typed'" v-for="(item,index) in array1"
				@click="active(index)" :key="index">{{item.type}}</text>
		</view>
		<view class="schedule-name">
			<input type="text" value="日程名称" class="txt" v-model:value="postOb.txt" />
		</view>
		<view class="settings">
			<view class="wholeday setting">
				<text class="title">全天</text>
				<view :class="index1==0?'switch setting':'switchActive setting'" @click="index1=index1==0?1:0">
					<view :class="index1==0?'switchItem setting':'switchItemActive setting'"></view>
				</view>
			</view>
			<view class="begin setting">
				<text class="title">开始</text>
				<view class="dt">
					<input type="text" class="date" v-model="postOb.date" value="2024年3月29日" />
					<input type="text" class="time" value="16:30" v-model="postOb.begantime" />
				</view>
			</view>
			<view class="end setting">
				<text class="title">结束</text>
				<view class="dt">
					<input type="text" class="date" value="2024年3月29日" v-model="postOb.date" />
					<input type="text" class="time" value="17:30" v-model="postOb.endtime" />
				</view>
			</view>
		</view>
		<view class="bell">
			<text class="title">响铃提醒</text>
			<view :class="index2==0?'switch setting':'switchActive setting'" @click="index2=index2==0?1:0">
				<view :class="index2==0?'switchItem setting':'switchItemActive setting'"></view>
			</view>
		</view>
		<view class="location">
			<input type="text" value="地点" />
			<button @click="locate">
				<img src="static/images/location.png" alt="">
			</button>

		</view>
		<view class="remarks">
			<input type="text" value="备注" />
		</view>
		<navigator url='/pages/schedule/schedule'>
			<button @click="add()">完成</button>
		</navigator>
	</view>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				index1: 0,
				index2: 0,
				currentindex: 0,
				array1: [{
						type: '日程',
					},
					{
						type: '生日',
					},
					{
						type: '纪念日',
					},
					{
						type: '倒数日',
					},
				],
				postOb: {
					txt: "",
					date: "",
					begantime: "",
					endtime: "",
				}
			}
		},
		methods: {
			active(i) {

				if (this.currentindex == i) {
					return
				}
				this.currentindex = i;
			},

			add() {
				uni.request({
					url:'http://localhost:3000/posts', //请求后端的接口地址,我这个仅供参考
					method: 'POST', //这个是后端你请求的方式，是什么请求就使用什么请求方式，且必须大写
					data: {
						"txt": "this.postOb.txt",
						"date":" this.postOb.date",
						"begantime": "this.postOb.begantime",
						"endtime": "this.postOb.endtime"
						// "txt": "",
						// "date": "",
						// "begantime": "",
						// "endtime": "",
					},
					header: {
						"Content-Type": "multipart/form-data" //请求头信息
					},
					dataType:'json',
					success: (res) => { //如果访问接口成功就会进入success
						console.log("接口调用成功");
					},
					fail: () => { //如果访问接口失败就会进入fail

						console.log("调用接口失败")

					}
				})
			},
			locate() {
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				});

			}
		},
	}
</script>

<style lang="less">
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;

	}

	a {
		text-decoration: none;
	}

	input {
		outline: none;
	}

	.box {
		background-color: #f1f2f6;
		padding-bottom: 10px;

		.type {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			padding: 30px 0 10px;
			background-color: #f1f2f6;

			.typed {
				background-color: #dfe0e4;
				width: 70px;
				height: 30px;
				text-align: center;
				padding: 5px 0;
				border-radius: 15px;
				box-sizing: border-box;
			}

			.active {
				color: #fff;
				background-color: #006afc;
				width: 70px;
				height: 30px;
				text-align: center;
				padding: 5px 0;
				border-radius: 15px;
				box-sizing: border-box;
			}
		}

		.schedule-name {
			width: 90%;
			margin: 20px auto;
			height: 65px;
			background-color: #fff;
			border-radius: 15px;
			padding-top: 18px;
			box-sizing: border-box;

			input {
				width: 90%;
				height: 30px;
				margin: 0 auto;
				border-left: 3px solid #006ef9;
				color: #969696;
			}
		}

		.settings {
			width: 90%;
			margin: 20px auto;
			background-color: #fff;
			border-radius: 15px;
			height: 180px;
			padding: 10px 15px;
			box-sizing: border-box;

			.begin {
				border-bottom: 1px solid #e2e2e2;
				height: 55px;
			}

			.setting {
				line-height: 55px;

				.title {
					float: left;
					color: black;
					font-weight: 700;
					font-size: 16px;
				}

				.dt {
					float: right;
					margin-top: 12px;

					.time,
					.date {
						background-color: #dfe0e4;
						border-radius: 15px;
						padding: 5px 8px;
						margin: 0 3px;
						float: right;
					}

					.date {
						width: 140px;
						height: 30px;
						text-align: center;
					}

					.time {
						width: 65px;
						height: 30px;
						text-align: center;
					}
				}

			}
			.end{
				.dt {
					float: right;
					margin-top: 12px;
				
					.time,
					.date {
						background-color: #dfe0e4;
						border-radius: 15px;
						padding: 5px 8px;
						margin: 0 3px;
						float: right;
					}
				
					.date {
						width: 140px;
						height: 30px;
						text-align: center;
					}
				
					.time {
						width: 65px;
						height: 30px;
						text-align: center;
					}
				}
			}

			.wholeday {
				border-bottom: 1px solid #e2e2e2;
				height: 55px;

				.switch,
				.switchActive {
					width: 60px;
					height: 30px;
					background-color: #dfe0e4;
					border-radius: 18px;
					float: right;
					margin-top: 12px;
				}

				.switchActive {
					background-color: blue;
				}

				.switchItem,
				.switchItemActive {
					width: 30px;
					height: 30px;
					background-color: #fff;
					border-radius: 50%;
				}

				.switchItemActive {
					transform: translateX(31px);
					transition: .5s;

				}
			}
		}

		.bell {
			width: 90%;
			margin: 20px auto;
			height: 65px;
			background-color: #fff;
			border-radius: 15px;
			padding-left: 16px;
			line-height: 65px;
			box-sizing: border-box;

			.title {
				float: left;
				color: black;
				font-weight: 700;
				font-size: 16px;
			}

			.switch,
			.switchActive {
				width: 60px;
				height: 30px;
				background-color: #dfe0e4;
				border-radius: 18px;
				float: right;
				margin-right: 15px;
				margin-top: 20px;
			}

			.switchActive {
				background-color: blue;
			}

			.switchItem,
			.switchItemActive {
				width: 30px;
				height: 30px;
				background-color: #fff;
				border-radius: 50%;
			}

			.switchItemActive {
				transform: translateX(31px);
				transition: .5s;

			}
		}

		.location {
			width: 90%;
			margin: 20px auto;
			height: 60px;
			background-color: #fff;
			border-radius: 15px;
			padding-top: 15px;
			box-sizing: border-box;
			position: relative;

			input {
				width: 90%;
				height: 30px;
				margin: 0 auto;
				color: #969696;
			}

			button {
				position: absolute;
				outline: none;
				width: 30px;
				height: 30px;
				border: none;
				right: 30px;
				top: 15px;

				img {

					width: 30px;
					text-align: center;
				}
			}
		}

		.remarks {
			width: 90%;
			margin: 20px auto;
			height: 60px;
			background-color: #fff;
			border-radius: 15px;
			padding-top: 15px;
			box-sizing: border-box;

			input {
				width: 90%;
				height: 30px;
				margin: 0 auto;
				color: #969696;
			}
		}
	}
</style>